<%--
  Created by IntelliJ IDEA.
  User: funnyday
  Date: 2021/9/14
  Time: 17:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script src="https://static.runoob.com/assets/jquery/jquery.growl/javascripts/jquery.growl.js" type="text/javascript"></script>
  <link href="https://static.runoob.com/assets/jquery/jquery.growl/stylesheets/jquery.growl.css" rel="stylesheet" type="text/css" />
  <title>智能餐饮管理系统</title>


  <style>


    head{
      position: absolute;
      width: 100%;
      height: 100%;
    }
    a:link {text-decoration:none;}
    a:visited {text-decoration:none;}
    a:hover {text-decoration:none;}
    a:active {text-decoration:none;}

    li a {
      display: block;
      color: #000;
      padding: 8px 18px;
      text-decoration: none;
      border-radius: 20px;
      height: 50px;
      align-self: center;
    }

    /* 鼠标移动到选项上修改背景颜色 */
    li a:hover {
      background-color: #555;
      color: white;
    }
    li a.active {
      background-color: green;
      color: white;
    }

    li a:hover:not(.active) {
      background-color: grey;
      color: white;
    }

    .index_picture{
      position:absolute;
      width:1000px;
      height:500px;
      left:200px;
      top:100px;
      border-radius: 25px;
    }
    .system_name{
      list-style-type: none;
      margin: 0;
      padding: 0;
      position: relative;
      width: 380px;
      left: 30px;
      top: 5px;
    }
    .enter
    {
      opacity:0.7;
      position:absolute;
      width:440px;
      height:600px;
      left:1650px;
      top:100px;
      background-color: white;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 100px;
      border-top-right-radius: 100px;
      border-bottom-right-radius: 20px;
    }
    .log_navigate{
      list-style-type: none;
      margin: 0;
      padding: 0;
      position: relative;
      width: 380px;
      height: 100px;
      left: 30px;
      top: 5px;

    }
    .login_choise
    {
      position: relative;
      width: 180px;
      height: 60px;
      left : 0px;
      top : 40px;
      padding-left: 10px;
      border-radius: 10px;
      float:left
    }
    .enter_box{
      position: relative;
      width: 350px;
      height: 300px;
      left : 40px;
      top : 60px;
      margin-left: 10px;
      margin-right: 10px;
      border-radius: 20px;
    }
    .login_text{
      position: relative;
      border-radius: 5px;
    }
    .introduce_pic{
      position:absolute;
      width:1900px;
      height:300px;
      left:180px;
      top:740px;

    }


    div.img {
      margin: 20px;
      border: 1px solid #ccc;
      float: left;
      width: 430px;
    }

    div.img:hover {
      border: 1px solid #777;
    }

    div.img img {
      width: 100%;
      height: auto;
    }

    div.desc {
      padding: 15px;
      text-align: center;
    }


  </style>
  <script>
    $(document).ready(function(){
      $("#login").click(function(){
        $("#register_box").hide();
        $("#login_box").show();
        $("#register").removeClass("active");
        $("#login").addClass("active");
      });
      $("#register").click(function(){
        $("#register_box").show();
        $("#login_box").hide();
        $("#login").removeClass("active");
        $("#register").addClass("active");
      });

      // 注册无论对错直接跳转
      //TODO
      $("#register_success").click(function(){
        $("#register_box").hide();
        $("#login_box").show();
        $("#register").removeClass("active");
        $("#login").addClass("active");
      });
    });
    function login(){
      register
    }
  </script>
  <script type="text/javascript">
    $(document).ready(function() {
      var form = $("#myform");
      $('#login-button').click(function (event) {
        if (form.find("[name='id']").val() == "" || form.find("[name='password']").val() == "") {
          event.preventDefault();
          event.stopPropagation();
          return $.growl.error({
            title: "请输入用户名或密码",
            message: "用户名或密码为空！！！",
            height:200,
            width:200
          });

        } else {

          var id = $('#input-id').val();
          var password = $('#password').val();

          $.post("MianController?method=loginCheck", {
            id: id,
            password: password,
          }, function (data) {
            if (data == "login_right") {
              window.location.href = "MianController?method=Login";

            } else {
              event.preventDefault();
              event.stopPropagation();
              return $.growl.error({
                title: "登录失败",
                message: "用户名或密码错误！！！！！！",
                height:200,
                width:200
              });

            }


          })

        }

      })
    })
  </script>

  <script type="text/javascript">
    function signUpCheck() {
      var id = $('#user').val();
      var password = $('#pwd').val();
      var password2 = $('#pwd2').val();
      var tell = $('#tell').val();
      var result;
      if(password2!=password){
        event.preventDefault();
        event.stopPropagation();
        return $.growl.error({
          title: "请输入相同的密码",
          message: "两次输入密码不相同！！！！！",
        });
        result=0;
      }
      else {
        $.post("MianController?method=SignUpCheck", {
          username: id,
          userpwd: password,
          tell: tell
        }, function (data) {
          if (data == "sign_right") {
            event.preventDefault();
            event.stopPropagation();
            return $.growl.notice({
              title: "注册成功",
              message: "您可以登录后点餐",
            });

            result=1;

          } else if (data == "Duplicate name") {
            event.preventDefault();
            event.stopPropagation();
            return $.growl.error({
              title: "注册失败",
              message: "用户名重复，请换一个",
            });
            result=0;
          }

        })
      }


      if(result==1) return true;
      else return false;

    }

  </script>
</head>
<body>
<div class = "backGround">
  <img src = "../img/2.png" width="2402px" height="1202px" style="align-self: center">

<div class="enter">
  <div class="system_name" style="margin-top: 30px; margin-left: 50px;">
    <p style="font-size: 220%; font-weight: 300;">智能餐饮管理系统</p>
  </div>
  <ul class="log_navigate" >

    <li class="login_choise">
      <a  id = "login" class="active" href="#" onclick="login()" style="padding-left: 10px;" ><p style="font-size: larger;">LOG IN 登录</p></a>
    </li>
    <li class="login_choise" >
      <a  id = "register" class="" href="#" onclick="register()"style="padding-left: 10px;" ><p style="font-size: larger;">SIGH UP 注册</p></a>
    </li>

  </ul>
  </ul>
  <div id = "login_box" class = "enter_box" >
    <form action="#" method = "post" accept-charset="UTF-8" id="myform" onsubmit="return loginCheck()" >

      <div class="input-group mb-3">

        <div class="input-group-prepend">
          <span class="input-group-text">用户名</span>
        </div>
        <input type="text" class="form-control" placeholder="Account"  name="id" id="input-id" style="height:60px;">
      </div>
      <div style="width: 350px;height: 30px;"></div>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text">密 码</span>
        </div>
        <input type="password" class="form-control" placeholder="Password" name="password" id="password" style="height: 60px;">

      </div>
      <div style="width: 350px;height: 30px;"></div>
      <button type="button" class="btn btn-primary"
              style="height: 48px;  width: 100px; margin: 20px; float: right;"
              id="login-button" data-loading-text="登录中...">
        <p style="font-size: 140%;">确 定</p>
      </button>
    </form>

  </div>
  <div id = "register_box" class = "enter_box" style="display: none; top: 20px ">
    <form action="MianController?method=SignUp" method = "post" accept-charset="UTF-8" id="sign_form" onsubmit="return signUpCheck()">

      <div class="input-group mb-3">

        <div class="input-group-prepend">
          <span class="input-group-text">用户名</span>
        </div>
        <input type="text" class="form-control" placeholder="Username" id="user" name="username" style="height:60px;"
               pattern=".{1,6}" required title="1到6个字符">
      </div>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text">密 码</span>
        </div>
        <input type="password" class="form-control" placeholder="Password"
               id="pwd" name="userpwd" pattern=".{8,12}" required title="8到12个字符"
               style="height: 60px;">

      </div>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text">确认密码</span>
        </div>
        <input type="password" class="form-control" placeholder="Password"
               id="pwd2" name="userpwd2" pattern=".{8,12}" required title="8到12个字符"
               style="height: 60px;">

      </div>
      <div class="input-group mb-4">
        <div class="input-group-prepend">
          <span class="input-group-text">电话号</span>
        </div>
        <input type="text" class="form-control" placeholder="Telephone"
               id="tell" name="tell" pattern=".{11}" required title="11个数字"
               style="height: 60px;">

      </div>
      <input type="submit" class="btn btn-primary"  style="height: 48px;  width: 100px; margin: 0px; float: right ;" id="sign_button" value="确定" >
<%--        <p style="font-size: 140%;">确 定</p>--%>

    </form>

  </div>
</div>
</div>
</body>


</html>
